<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>探索者的思考 | 个人博客</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
            .blog-card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
            }
        }
    </style>
</head>

<body class="font-inter bg-light text-dark antialiased">
    <!-- 导航栏 -->
    <header id="navbar"
        class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 py-3 md:py-4">
            <div class="flex justify-between items-center">
                <a href="index.html" class="flex items-center space-x-2">
                    <span class="text-primary text-2xl"><i class="fa fa-feather"></i></span>
                    <span class="text-xl font-bold text-dark">glddy's blog</span>
                </a>

                <!-- 桌面导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-dark hover:text-primary font-medium transition-colors">首页</a>
                    <a href="about.html" class="text-dark hover:text-primary font-medium transition-colors">关于我</a>
                    <a href="contact.html" class="text-dark hover:text-primary font-medium transition-colors">联系</a>
                </nav>

                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-dark focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>

            <!-- 移动端导航菜单 -->
            <div id="mobile-menu" class="md:hidden hidden mt-4 pb-2">
                <a href="index.html"
                    class="block py-2 text-dark hover:text-primary font-medium transition-colors">首页</a>
                <a href="about.html"
                    class="block py-2 text-dark hover:text-primary font-medium transition-colors">关于我</a>
                <a href="contact.html"
                    class="block py-2 text-dark hover:text-primary font-medium transition-colors">联系</a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 博客英雄区 -->
        <section class="mb-16">
            <div class="relative rounded-2xl overflow-hidden bg-primary/5 p-8 md:p-12">
                <div class="max-w-3xl mx-auto text-center">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark leading-tight mb-4">
                        分享探索世界的<span class="text-primary">思考与发现</span>
                    </h1>
                    <p class="text-lg md:text-xl text-gray-600 mb-8">
                        这里记录了我在技术、生活和成长中的点点滴滴，希望能与你分享我的知识和经验。
                    </p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <a href="#featured"
                            class="px-6 py-3 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
                            探索文章
                        </a>
                        <a href="about.html"
                            class="px-6 py-3 bg-white text-primary border border-primary rounded-full hover:bg-primary/5 transition-colors">
                            了解更多
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 分类标签 -->
        <section class="mb-12">
            <div class="flex flex-wrap gap-3 justify-center">
                <a href="#"
                    class="px-4 py-2 bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">全部</a>
                <a href="#"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">技术</a>
                <a href="#"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">生活</a>
                <a href="#"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">旅行</a>
                <a href="#"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">阅读</a>
                <a href="#"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">摄影</a>
            </div>
        </section>

        <!-- 精选文章 -->
        <section id="featured" class="mb-16">
            <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center">精选文章</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 文章卡片 1 -->
                <article class="bg-white rounded-xl overflow-hidden blog-card-shadow hover-scale">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/seed/tech1/800/600" alt="探索人工智能的未来发展"
                            class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                        <div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full">技术</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3 hover:text-primary transition-colors">
                            <a href="#">探索人工智能的未来发展</a>
                        </h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">人工智能正以前所未有的速度改变着我们的生活和工作方式。本文探讨了AI技术的最新进展以及未来可能的发展方向。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500"><i class="fa fa-calendar-o mr-1"></i> 2023-05-15</span>
                            <a href="#" class="text-primary hover:underline">阅读更多 <i
                                    class="fa fa-arrow-right ml-1"></i></a>
                        </div>
                    </div>
                </article>

                <!-- 文章卡片 2 -->
                <article class="bg-white rounded-xl overflow-hidden blog-card-shadow hover-scale">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/seed/travel1/800/600" alt="北欧旅行：探索极光与峡湾"
                            class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                        <div class="absolute top-4 left-4 bg-green-500 text-white text-sm px-3 py-1 rounded-full">旅行
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3 hover:text-primary transition-colors">
                            <a href="#">北欧旅行：探索极光与峡湾</a>
                        </h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">去年冬天，我踏上了北欧之旅，亲眼目睹了壮丽的极光和深邃的峡湾。这篇文章分享了我的旅行经历和实用攻略。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500"><i class="fa fa-calendar-o mr-1"></i> 2023-04-22</span>
                            <a href="#" class="text-primary hover:underline">阅读更多 <i
                                    class="fa fa-arrow-right ml-1"></i></a>
                        </div>
                    </div>
                </article>

                <!-- 文章卡片 3 -->
                <article class="bg-white rounded-xl overflow-hidden blog-card-shadow hover-scale">
                    <div class="relative h-52 overflow-hidden">
                        <img src="https://picsum.photos/seed/life1/800/600" alt="极简主义生活：如何减少物质依赖"
                            class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                        <div class="absolute top-4 left-4 bg-purple-500 text-white text-sm px-3 py-1 rounded-full">生活
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3 hover:text-primary transition-colors">
                            <a href="#">极简主义生活：如何减少物质依赖</a>
                        </h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">在这个物质丰富的时代，我发现极简主义生活方式让我更加自由和满足。本文分享了我实践极简主义的经验和心得。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500"><i class="fa fa-calendar-o mr-1"></i> 2023-03-18</span>
                            <a href="#" class="text-primary hover:underline">阅读更多 <i
                                    class="fa fa-arrow-right ml-1"></i></a>
                        </div>
                    </div>
                </article>
            </div>
        </section>

        <!-- 最新文章 -->
        <section class="mb-16">
            <h2 class="text-2xl md:text-3xl font-bold mb-8 text-center">最新文章</h2>
            <div class="space-y-6">
                <!-- 最新文章列表 1 -->
                <article class="bg-white rounded-xl overflow-hidden blog-card-shadow hover-scale">
                    <div class="md:flex">
                        <div class="md:w-1/3 relative h-48 md:h-auto">
                            <img src="https://picsum.photos/seed/tech2/800/600" alt="前端开发的未来趋势"
                                class="w-full h-full object-cover">
                            <div class="absolute top-4 left-4 bg-primary text-white text-sm px-3 py-1 rounded-full">技术
                            </div>
                        </div>
                        <div class="md:w-2/3 p-6">
                            <h3 class="text-xl font-bold mb-2 hover:text-primary transition-colors">
                                <a href="#">前端开发的未来趋势</a>
                            </h3>
                            <p class="text-gray-600 mb-4 line-clamp-2 md:line-clamp-3">
                                随着Web技术的快速发展，前端开发领域也在不断演进。本文分析了2023年及未来几年可能影响前端开发的主要趋势。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500"><i class="fa fa-calendar-o mr-1"></i>
                                    2023-06-05</span>
                                <a href="#" class="text-primary hover:underline">阅读更多 <i
                                        class="fa fa-arrow-right ml-1"></i></a>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 最新文章列表 2 -->
                <article class="bg-white rounded-xl overflow-hidden blog-card-shadow hover-scale">
                    <div class="md:flex">
                        <div class="md:w-1/3 relative h-48 md:h-auto">
                            <img src="https://picsum.photos/seed/book1/800/600" alt="2023年上半年阅读书单推荐"
                                class="w-full h-full object-cover">
                            <div class="absolute top-4 left-4 bg-yellow-500 text-white text-sm px-3 py-1 rounded-full">
                                阅读</div>
                        </div>
                        <div class="md:w-2/3 p-6">
                            <h3 class="text-xl font-bold mb-2 hover:text-primary transition-colors">
                                <a href="#">2023年上半年阅读书单推荐</a>
                            </h3>
                            <p class="text-gray-600 mb-4 line-clamp-2 md:line-clamp-3">
                                每个月我都会阅读几本书，涵盖技术、哲学、心理学等多个领域。这篇文章分享了我在2023年上半年读过的一些值得推荐的书籍。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500"><i class="fa fa-calendar-o mr-1"></i>
                                    2023-06-01</span>
                                <a href="#" class="text-primary hover:underline">阅读更多 <i
                                        class="fa fa-arrow-right ml-1"></i></a>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 最新文章列表 3 -->
                <article class="bg-white rounded-xl overflow-hidden blog-card-shadow hover-scale">
                    <div class="md:flex">
                        <div class="md:w-1/3 relative h-48 md:h-auto">
                            <img src="https://picsum.photos/seed/photo1/800/600" alt="手机摄影技巧：如何拍出专业级照片"
                                class="w-full h-full object-cover">
                            <div class="absolute top-4 left-4 bg-pink-500 text-white text-sm px-3 py-1 rounded-full">摄影
                            </div>
                        </div>
                        <div class="md:w-2/3 p-6">
                            <h3 class="text-xl font-bold mb-2 hover:text-primary transition-colors">
                                <a href="#">手机摄影技巧：如何拍出专业级照片</a>
                            </h3>
                            <p class="text-gray-600 mb-4 line-clamp-2 md:line-clamp-3">
                                如今，手机已经成为我们最常用的摄影工具。本文分享了一些实用的手机摄影技巧，帮助你拍出更加出色的照片。</p>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500"><i class="fa fa-calendar-o mr-1"></i>
                                    2023-05-28</span>
                                <a href="#" class="text-primary hover:underline">阅读更多 <i
                                        class="fa fa-arrow-right ml-1"></i></a>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </section>

        <!-- 分页 -->
        <section class="flex justify-center">
            <nav class="inline-flex rounded-md shadow-sm">
                <a href="#"
                    class="py-2 px-4 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 rounded-l-md">
                    <i class="fa fa-chevron-left"></i>
                </a>
                <a href="#"
                    class="py-2 px-4 border-t border-b border-gray-300 bg-primary text-sm font-medium text-white">1</a>
                <a href="#"
                    class="py-2 px-4 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
                <a href="#"
                    class="py-2 px-4 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a>
                <span
                    class="py-2 px-4 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
                <a href="#"
                    class="py-2 px-4 border-t border-b border-r border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">8</a>
                <a href="#"
                    class="py-2 px-4 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 rounded-r-md">
                    <i class="fa fa-chevron-right"></i>
                </a>
            </nav>
        </section>
    </main>

    <!-- 订阅区域 -->
    <section class="bg-primary/5 py-16">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-2xl md:text-3xl font-bold mb-4">订阅我的博客更新</h2>
                <p class="text-gray-600 mb-8">第一时间获取最新文章和独家内容，不错过任何有价值的分享。</p>
                <form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
                    <input type="email" placeholder="输入你的邮箱地址"
                        class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <button type="submit"
                        class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20 whitespace-nowrap">
                        立即订阅
                    </button>
                </form>
                <p class="text-sm text-gray-500 mt-4">我们尊重你的隐私，绝不会分享你的邮箱地址。</p>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <span class="text-primary text-2xl"><i class="fa fa-feather"></i></span>
                        <span class="text-xl font-bold">探索者的思考</span>
                    </div>
                    <p class="text-gray-400 mb-6">
                        记录技术与生活的思考，分享知识与经验的积累。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-gray-400 hover:text-primary transition-colors">首页</a></li>
                        <li><a href="about.html" class="text-gray-400 hover:text-primary transition-colors">关于我</a></li>
                        <li><a href="contact.html" class="text-gray-400 hover:text-primary transition-colors">联系</a>
                        </li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">使用条款</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">文章分类</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">技术 (42)</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">生活 (28)</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">旅行 (16)</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">阅读 (12)</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">摄影 (8)</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">联系方式</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-primary"></i>
                            <span class="text-gray-400">湖南省湘潭市雨湖区湘潭大学西湖一栋303</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-primary"></i>
                            <a href="mailto:hello@example.com"
                                class="text-gray-400 hover:text-primary transition-colors">glddyjark@gmail.com</a>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-primary"></i>
                            <a href="tel:+8613100001234" class="text-gray-400 hover:text-primary transition-colors">+86
                                155-7479-1017</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">
                        © 2023 探索者的思考. 保留所有权利.
                    </p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">使用条款</a>
                        <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">Cookie政策</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        // import header.html;
        window.addEventListener('scroll', function () {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'md:py-4', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'md:py-4', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });

        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function () {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                const targetId = this.getAttribute('href');
                if (targetId === '#') return;

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });

                    // 关闭移动端菜单
                    document.getElementById('mobile-menu').classList.add('hidden');
                }
            });
        });
    </script>

</body>

</html>